.banner{width: 100%; position: relative; overflow: hidden}

.banner_con{width: 100%; height: 100%; position: fixed; z-index: 1}
.banner_con .swiper-slide{width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover}
.banner_con .swiper-slide .txt{width: 960px; position: absolute; top: 40%; left: 50%; margin-left: -480px; text-align: center}
.banner_con .txt h1{font-size: 26px; color: #fff; font-weight: normal; text-shadow: 5px 0 2px #000; font-family: 'novecentowide_normal'; transform: translateY(50px); -webkit-transform: translateY(50px); opacity: 0; filter:Alpha(opacity=50)}
.banner_con .txt h3{font-size: 96px; color: #f0f0f0; font-weight: normal; text-shadow: 5px 0 5px #000; font-family: 'dincond-bold'; transform: translateY(50px);  -webkit-transform: translateY(50px); opacity: 0; filter:Alpha(opacity=50)}
.banner_con .txt h3 img{width: 588px; float: none; display: block; margin: 15px auto}
.banner_con .txt p{font-size: 22px; color: #fff; text-shadow: 5px 0 2px #000; transform: translateY(50px);  -webkit-transform: translateY(50px); opacity: 0; filter:Alpha(opacity=50)}
.banner_con .txt .link{width: 110px; padding: 10px 20px; background: #1360a6; color: #fff; margin: 60px auto; transform: translateY(50px);  -webkit-transform: translateY(50px); opacity: 0; filter:Alpha(opacity=50)}
.banner_con .txt .link:hover{background: #333; transition-duration: 1s}

.banner_con .swiper-slide-active .txt h1{animation: t3 1s forwards; -webkit-animation: t3 1s forwards}
.banner_con .swiper-slide-active .txt h3{animation: t1 1s forwards; -webkit-animation: t1 1s forwards}
.banner_con .swiper-slide-active .txt p{animation: t2 1s forwards; -webkit-animation: t2 1s forwards}
.banner_con .swiper-slide-active .txt .link{animation: t4 1s forwards; -webkit-animation: t2 1s forwards}
@keyframes t1 {
    0%{transform: translateY(50px); opacity: 0}
    100%{transform: translateY(0); opacity: 1}
}

@keyframes t2 {
    0%{transform: translateY(50px); opacity: 0}
    100%{transform: translateY(0); opacity: 1}
}

@keyframes t3 {
    0%{transform: translateY(50px); opacity: 0}
    100%{transform: translateY(0); opacity: 1}
}
@keyframes t4 {
    0%{transform: translateY(50px); opacity: 0}
    100%{transform: translateY(0); opacity: 1}
}

/*----------------------------index-----------------------------*/
.title{width: 100%; text-align: center; margin-bottom: 60px}
.title h3{font-size: 38px; color: #333; letter-spacing: 2px; margin-bottom: 6px; font-family: 'dincond-bold'}
.title p{font-size: 13px; color: #666; margin-bottom: 30px;}
.title .btn{width: 120px; display: block; font-size: 12px; color: #fff; background: #1360a6; border-radius: 6px; padding: 4px 40px; margin: 0 auto; transition: all .4s; -webkit-transition: all .4s}
.title .btn:hover{background: #3c3c3c; padding: 4px 60px}


/*----content----*/
.content{width: 100%; position: relative; background: #fff; z-index: 5}

/*----ms-server----*/
.ms-server{width: 100%; background: #1360a6; overflow: hidden; margin-bottom: 40px; position: relative}
.ms-server ul{list-style: none; margin: 0 2%; padding: 40px 0}
.ms-server li{float: left; width: 18%; margin: 0 1%; padding: 0 1%; text-align: center; border-radius: 20px; box-sizing: border-box; transition: all .4s; -webkit-transition: all .4s}
.ms-server .img{width: 100%; height: 120px; margin: 20px auto}
.ms-server .img img{width: 100%; float: none}
.ms-server h3{color: #fff; margin-bottom: 40px; font-size: 15px; font-weight: normal}
.ms-server li:hover{background: #0d579b; box-shadow: 0 8px 16px rgba(0,0,0,.3)}


/*----ms-product----*/
.ms-product{width: 100%; position: relative; overflow: hidden; margin-bottom: 40px}

.ms-product ul{list-style: none; width: 90%; margin: 0 auto}
.ms-product li{width: 24%; margin:0.5%; float: left; overflow: hidden; position: relative}
.ms-product .img{display: block; overflow: hidden}
.ms-product .img img{width: 100%; height: auto; transition: all .5s; -webkit-transition: all .5s}
.ms-product .img:hover img{transform: scale(1.1); -webkit-transform: scale(1.1)}

.ms-product .product-info{width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: all .6s; -webkit-transition: all .6s}
.ms-product .product-info:hover{background: rgba(0,0,0,.2)}
.ms-product .product-info .product-info-text{width: 100%; height: 60px;  position: absolute; bottom: -90px; left: 0;  padding-left: 20px; background: #3c3c3c; color: #fff; opacity: .7; transition: all .5s; -webkit-transition: all .5s}
.ms-product .product-info:hover .product-info-text{bottom: 0}
.ms-product .product-info .product-info-text h3{padding-top: 16px; font-size: 15px; font-weight: normal;}
.ms-product .product-info .product-info-text p{font-size: 12px; padding-top: 4px}



/*----ms-products----*/
.ms-products{width: 100%; position: relative; background: url("../image/products-bg.jpg") no-repeat; padding-bottom: 60px}
.ms-products .w1200{width: 1180px; margin: 0 auto; position: relative}

.ms-products .products-title{padding-top: 40px;}
.ms-products .products-title h3{font-size: 36px; color: #666;}
.ms-products .products-title h4{font-size: 24px; color: #1360a6}

.ms-products .img_bg{width: 100%; height: 600px; position: relative; background: url("../image/pro-dh.png") no-repeat; background-size: cover}
.ms-products .img_bg .d{display: block; width: 50px; height: 50px; position: absolute; background: url("../image/icon-1.png") no-repeat; cursor: pointer; z-index: 3; animation: zoom_1 1.4s infinite}
.ms-products .img_bg .d_1{top: 230px; left: 250px}
.ms-products .img_bg .d_2{top: 190px; left: 340px}
.ms-products .img_bg .d_3{top: 280px; left: 370px}
.ms-products .img_bg .d_4{top: 190px; left: 380px}
.ms-products .img_bg .d_5{top: 190px; left: 430px}
.ms-products .img_bg .d_6{top: 170px; right: 640px}
.ms-products .img_bg .d_7{top: 270px; right: 700px}
.ms-products .img_bg .d_8{top: 150px; right: 580px}
.ms-products .img_bg .d_9{top: 240px; right: 680px}
.ms-products .img_bg .d_10{top: 310px; right: 610px}
.ms-products .img_bg .d_11{bottom: 190px; right: 590px}
.ms-products .img_bg .d_12{bottom: 150px; right: 520px}
.ms-products .img_bg .d_13{top: 230px; right: 500px}
.ms-products .img_bg .d_14{top: 250px; right: 340px}

@keyframes zoom_1 {
    0%{transform: scale(1)}
    50%{transform: scale(0.9)}
    100%{transform: scale(1)}
}

.ms-products .list_4_con_con{width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin-top: 40px}
.ms-products .list_4_con_con .img{width: 260px; overflow: hidden; position: absolute; border-radius: 6px; box-shadow: 1px 1px 1px #000; display: none}
.ms-products .list_4_con_con .img img{width: 100%}

.ms-products .list_4_con_con .img_1{top: 100px; left: 0}
.ms-products .list_4_con_con .img_2{left: 0; top: 200px}
.ms-products .list_4_con_con .img_3{top: 360px; left: 0}
.ms-products .list_4_con_con .img_4{top: 70px; left: 180px}
.ms-products .list_4_con_con .img_5{bottom: 480px; left: 260px}
.ms-products .list_4_con_con .img_6{top: 0; left: 420px}
.ms-products .list_4_con_con .img_7{bottom: 0; left: 0}
.ms-products .list_4_con_con .img_8{top: 0; right: 120px}
.ms-products .list_4_con_con .img_9{bottom: 60px; left: 200px}
.ms-products .list_4_con_con .img_10{bottom: 40px; left: 350px}
.ms-products .list_4_con_con .img_11{bottom: 0; right: 280px}
.ms-products .list_4_con_con .img_12{bottom: 20px; right: 0}
.ms-products .list_4_con_con .img_13{bottom: 240px; right: 0}
.ms-products .list_4_con_con .img_14{top: 60px; right: 0}




/*----banner-one----*/
.banner-one{position: relative; max-height: 650px; margin-bottom: 40px; background: #3c3c3c; overflow: hidden}
.banner-one .slick-slide img{width: 65%}

.banner-one .list1{width: 35%; float: right; margin-top: 60px; text-align: center; color: #f0f0f0}
.banner-one .list1 h3{padding-top: 120px; font-size: 24px; color: #fff; padding-bottom: 10px; letter-spacing: 4px;}
.banner-one .list1 p{font-size: 13px; padding-bottom: 40px}
.banner-one .list1 .txt{margin: 0 100px; padding-bottom: 80px}


/*----ms-about----*/
.ms-about{width: 100%; position: relative; overflow: hidden; margin-bottom: 40px}
.ms-about .img{width: 100%; overflow: hidden; position: relative}
.ms-about .img .about_mob{display: none}
.ms-about .img img{width: 100%; height: auto}
.ms-about .img_con{width: 100%; position: absolute; top: 31%; left: 0;}
.ms-about .img_con .video{width: 50%; height: auto; float: left; overflow: hidden}
.ms-about .img_con .video video{width: 100%; height: auto; object-fit:cover}
.ms-about .con{width: 50%; height: auto; float: left}
.ms-about .con p{padding: 15% 15%; font-size: 13px; color: #fff; line-height: 26px}


/*----ms-news----*/
.ms-news{width: 100%; position: relative; overflow: hidden;}
.ms-news .title{background: #fff; margin-bottom: 0; padding-bottom: 60px}

.ms-news ul{width: 100%; list-style: none; margin: 0 auto; position: relative; background: #f0f0f0}
.ms-news li{padding-top: 30px; border-bottom: 1px solid #e0e0e0; transition: all .5s; -webkit-transition: all .5s; position: relative}
.ms-news li i{display: block; width: 12px; height: 22px; position: absolute; right: -20px; top: 50%; margin-top: -18px; background: url("../image/right-3.png") no-repeat; background-size: cover; opacity: 0; transition: all .4s; -webkit-transition: all .4s}
.ms-news li:hover i{right: -80px; opacity: 1}
.ms-news ul a{width: 800px; height: 100px; margin: 0 auto; display: block; padding-left: 80px; padding-bottom: 30px; position: relative; transition: all .4s; -webkit-transition: all .4s}
.ms-news .date{float: left; width: 160px; height: 100px; margin-right: 40px}
.ms-news .date h1{font-size: 46px; color: #888; font-weight: 100; font-family: 'novecentowide_normal'}
.ms-news .date p{font-size: 14px; color: #c0c0c0; text-align: right; padding-right: 10px;}
.ms-news .news-content{float: right; width: 600px; height: 90px; overflow: hidden}
.ms-news .news-content h3{font-size: 16px; color: #333; font-weight: 100; padding-bottom: 16px; padding-top: 6px}
.ms-news .news-content p{font-size: 14px; color: #666}
.ms-news li:hover{background: #3c3c3c}
.ms-news li:hover a{padding-left: 0;}
.ms-news li:hover h3{color: #fff}
.ms-news li:hover p{color: #fff}


/*----contact----*/
.ms-contact{width: 100%; height: 600px; position: relative; background: url("../image/contact.jpg") no-repeat center; background-size: cover}
.ms-contact .contact-w{width: 1180px; margin: 0 auto}

.ms-contact .contact-box{width: 100%; padding-top: 360px}

.ms-contact .contact-box .contact_con{width: 100%; padding-top: 60px }
.ms-contact .contact-box .contact_con .li{width: 25%; float: left; position: relative; padding-top: 60px; font-size: 15px; text-align: center; color: #999}
.ms-contact .contact-box .contact_con .li i{position: absolute; top: 0; left: 50%; margin-left: -16px; font-size: 34px}
.ms-contact .contact-box .contact_con .li:hover i{color: #fff}




#bottle{position: relative; width: 100%; height: 500px; overflow: hidden}

#bottle .bg_scr{width: 100%; height: 1200px; background: url(../image/new-bg.jpg) 50% 0 no-repeat fixed}